<html>
<head>
<title>Task 15 - Ludo</title>
<style>
h1 {
text-align: center;
font-size: 45px;
}
#outer {
height: 1000px;
width: 1000px;
border: 1px solid;
margin: 0 auto;
}
#papa {
height: 400px;
width: 1000px;
}
#child {
height: 400px;
width: 400px;
background-color: red;
float: left;
}
#child1 {
height: 400px;
width: 200px;
background-color: pink;
float: left;
}
#child2 {
height: 400px;
width: 400px;
background-color: green;
float: left;
}
#papa1 {
height: 200px;
width: 1000px;
}
#child3 {
height: 200px;
width: 400px;
background-color: pink;
float: left;
}
#child4 {
height: 200px;
width: 200px;
background-color: blue;
float: left;
}
#child5 {
height: 200px;
width: 400px;
background-color: pink;
float: left;
}
#child6 {
height: 400px;
width: 400px;
background-color: yellow;
float: left;
}
#child7 {
height: 400px;
width: 200px;
background-color: pink;
float: left;
}
#child8 {
height: 400px;
width: 400px;
background-color: blue;
float: left;
}
#box1 {
height: 398px;
width: 64.5px;
border: 1px solid;
float: left;
}
#box2 {
height: 398px;
width: 64.5px;
border: 1px solid;
float: left;
}
#box3 {
height: 398px;
width: 63.8px;
border: 1px solid;
float: left;
}
#box4 {
height: 64.5px;
width: 398px;
border: 1px solid;
}
#box5 {
height: 64.5px;
width: 398px;
border: 1px solid;
}
#box6 {
height: 64.5px;
width: 398px;
border: 1px solid;
}
#a1 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#a2 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
background-color: red;
}
#a3 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#a4 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#a5 {
height: 62.5px;
width: 63px;
border: 1px solid;
float: left;
}
#a6 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#b1 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#b2 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
background-color: red;
}
#b3 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
background-color: red;
}
#b4 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
background-color: red;
}
#b5 {
height: 62.5px;
width: 63px;
border: 1px solid;
float: left;
background-color: red;
}
#b6 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
background-color: red;
}
#c1 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#c2 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#c3 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#c4 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#c5 {
height: 62.5px;
width: 63px;
border: 1px solid;
float: left;
}
#c6 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#ca {
height: 60.5px;
width: 60.5px;
border: 1px solid;
border-radius: 30px 30px 30px 30px;
background-color: white;
}
#aa {
height: 60.5px;
width: 60.5px;
border: 1px solid;
border-radius: 30px 30px 30px 30px;
background-color: white;
}
#d1 {
height: 63px;
width: 64px;
border: 1px solid;
}
#d2 {
height: 64px;
width: 64px;
border: 1px solid;
}
#d3 {
height: 64px;
width: 64px;
border: 1px solid;
}
#d4 {
height: 64px;
width: 64px;
border: 1px solid;
}
#d5 {
height: 64px;
width: 64px;
border: 1px solid;
}
#d6 {
height: 64px;
width: 64px;
border: 1px solid;
}
#e1 {
height: 63px;
width: 64px;
border: 1px solid;
}
#e2 {
height: 64px;
width: 64px;
border: 1px solid;
background-color: green;
}
#e3 {
height: 64px;
width: 64px;
border: 1px solid;
background-color: green;
}
#e4 {
height: 64px;
width: 64px;
border: 1px solid;
background-color: green;
}
#e5 {
height: 64px;
width: 64px;
border: 1px solid;
background-color: green;
}
#e6 {
height: 64px;
width: 64px;
border: 1px solid;
background-color: green;
}
#f1 {
height: 63px;
width: 64px;
border: 1px solid;
}
#f2 {
height: 64px;
width: 63px;
border: 1px solid;
background-color: green;
}
#f3 {
height: 64px;
width: 64px;
border: 1px solid;
}
#f4 {
height: 64px;
width: 64px;
border: 1px solid;
}
#f5 {
height: 64px;
width: 64px;
border: 1px solid;
}
#f6 {
height: 64px;
width: 64px;
border: 1px solid;
}
#z1 {
height: 398px;
width: 64.5px;
border: 1px solid;
float: left;
}
#h1 {
height: 63px;
width: 64px;
border: 1px solid;
}
#h2 {
height: 64px;
width: 64px;
border: 1px solid;
}
#h3 {
height: 64px;
width: 64px;
border: 1px solid;
}
#h4 {
height: 64px;
width: 64px;
border: 1px solid;
}
#h5 {
height: 64px;
width: 64px;
border: 1px solid;
background-color: yellow;
}
#h6 {
height: 64px;
width: 64px;
border: 1px solid;
}
#z2 {
height: 398px;
width: 64.5px;
border: 1px solid;
float: left;
}
#i1 {
height: 63px;
width: 64px;
border: 1px solid;
background-color: yellow;
}
#i2 {
height: 64px;
width: 64px;
border: 1px solid;
background-color: yellow;
}
#i3 {
height: 64px;
width: 64px;
border: 1px solid;
background-color: yellow;
}
#i4 {
height: 64px;
width: 64px;
border: 1px solid;
background-color: yellow;
}
#i5 {
height: 64px;
width: 64px;
border: 1px solid;
background-color: yellow;
}
#i6 {
height: 64px;
width: 64px;
border: 1px solid;
}
#z3 {
height: 398px;
width: 63.8px;
border: 1px solid;
float: left;
}
#j1 {
height: 63px;
width: 64px;
border: 1px solid;
}
#j2 {
height: 64px;
width: 64px;
border: 1px solid;
}
#j3 {
height: 64px;
width: 64px;
border: 1px solid;
}
#j4 {
height: 64px;
width: 64px;
border: 1px solid;
}
#j5 {
height: 64px;
width: 64px;
border: 1px solid;
}
#j6 {
height: 64px;
width: 64px;
border: 1px solid;
}
#g1 {
height: 64px;
width: 398px;
border: 1px solid;
}
#g2 {
height: 65px;
width: 398px;
border: 1px solid;
}
#g3 {
height: 64px;
width: 398px;
border: 1px solid;
}
#k1 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#k2 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#k3 {
height: 62.5px;
width: 65px;
border: 1px solid;
float: left;
}
#k4 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#k5 {
height: 62.5px;
width: 63px;
border: 1px solid;
float: left;
}
#k6 {
height: 62.5px;
width: 63px;
border: 1px solid;
float: left;
}
#l1 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
background-color: blue;
}
#l2 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
background-color: blue;
}
#l3 {
height: 62.5px;
width: 65px;
border: 1px solid;
float: left;
background-color: blue;
}
#l4 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
background-color: blue;
}
#l5 {
height: 62.5px;
width: 63px;
border: 1px solid;
float: left;
background-color: blue;
}
#l6 {
height: 62.5px;
width: 63px;
border: 1px solid;
float: left;
}
#m1 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#m2 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#m3 {
height: 62.5px;
width: 65px;
border: 1px solid;
float: left;
}
#m4 {
height: 62.5px;
width: 64px;
border: 1px solid;
float: left;
}
#m5 {
height: 62.5px;
width: 63px;
border: 1px solid;
float: left;
background-color: blue;
}
#m6 {
height: 62.5px;
width: 63px;
border: 1px solid;
float: left;
}
#d3a {
height: 62px;
width: 62px;
border: 1px solid;
border-radius: 55px 55px 55px 55px;
background-color: white;
}
#f2a {
height: 62px;
width: 62px;
border: 1px solid;
border-radius: 55px 55px 55px 55px;
background-color: white;
}
#i4a {
height: 62px;
width: 62px;
border: 1px solid;
border-radius: 55px 55px 55px 55px;
background-color: white;
}
#i4b {
height: 62px;
width: 62px;
border: 1px solid;
border-radius: 55px 55px 55px 55px;
background-color: white;
}
#i4c {
height: 62px;
width: 62px;
border: 1px solid;
border-radius: 55px 55px 55px 55px;
background-color: white;
}
#i4d {
height: 62px;
width: 62px;
border: 1px solid;
border-radius: 55px 55px 55px 55px;
background-color: white;
}
#childa1 {
height: 400px;
width: 400px;
}
#childb1 {
height: 50px;
width: 400px;
}
#childb2 {
height: 300px;
width: 400px;
}
#childb3 {
height: 50px;
width: 400px;
}
#childba {
height: 400px;
width: 50px;
float: left;
}
#childbb {
height: 300px;
width: 300px;
background-color: white;
float: left;
}
#child1a {
height: 50px;
width: 300px;
}
#child1b {
height: 50px;
width: 300px;
}
#child1c {
height: 50px;
width: 50px;
float: left;
}
#child1d {
height: 50px;
width: 50px;
background-color: red;
border-radius: 10px;
float: left;
}
#child1e {
height: 50px;
width: 100px;
float: left;
}
#child1f {
height: 50px;
width: 50px;
background-color: red;
float: left;
border-radius: 10px;
}
#child1g {
height: 50px;
width: 50px;
float: left;
}
#child1h {
height: 150px;
width: 300px;
}
#child1i {
height: 50px;
width: 300px;
}
#child1j {
height: 50px;
width: 50px;
float: left;
}
#child1k {
height: 50px;
width: 50px;
background-color: red;
float: left;
border-radius: 10px;
}
#child1l {
height: 50px;
width: 100px;
float: left;
}
#child1m {
height: 50px;
width: 50px;
background-color: red;
float: left;
border-radius: 10px;
}
#sum {
height: 50px;
width: 400px;
}
#sum1 {
height: 300px;
width: 400px;
}
#sum2 {
height: 50px;
width: 400px;
}
#sum3 {
height: 300px;
width: 50px;
float: left;
}
#sum4 {
height: 300px;
width: 300px;
background-color: white;
float: left;
}
#sum5 {
height: 50px;
width: 300px;
}
#sum6 {
height: 50px;
width: 300px;
}
#sum7 {
height: 100px;
width: 300px;
}
#sum8 {
height: 50px;
width: 300px;
}
#sum9 {
height: 50px;
width: 50px;
float: left;
}
#sum10 {
height: 50px;
width: 50px;
background-color: green;
float: left;
border-radius: 10px;
}
#sum11 {
height: 50px;
width: 100px;
float: left;
}
#sum12 {
height: 50px;
width: 50px;
background-color: green;
float: left;
border-radius: 10px;
}
#sum13 {
height: 50px;
width: 50px;
float: left;
}
#sum14 {
height: 50px;
width: 50px;
background-color: green;
float: left;
border-radius: 10px;
}
#sum15 {
height: 50px;
width: 100px;
float: left;
}
#sum16 {
height: 50px;
width: 50px;
background-color: green;
float: left;
border-radius: 10px;
}
#sub {
height: 50px;
width: 400px;
}
#sub1 {
height: 300px;
width: 50px;
float: left;
}
#sub2 {
height: 300px;
width: 300px;
background-color: white;
float: left;
}
#sub3 {
height: 50px;
width: 300px;
}
#sub4 {
height: 50px;
width: 300px;
}
#sub5 {
height: 100px;
width: 300px;
}
#sub6 {
height: 50px;
width: 50px;
float: left;
}
#sub7 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
border-radius: 10px;
}
#sub8 {
height: 50px;
width: 100px;
float: left;
}
#sub9 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
border-radius: 10px;
}
#sub10 {
height: 50px;
width: 300px;
}
#sub11 {
height: 50px;
width: 50px;
float: left;
}
#sub12 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
border-radius: 10px;
}
#sub13 {
height: 50px;
width: 100px;
float: left;
}
#sub14 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
border-radius: 10px;
}
#mul {
height: 50px;
width: 400px;
}
#mul1 {
height: 300px;
width: 50px;
float: left;
}
#mul2 {
height: 300px;
width: 300px;
background-color: white;
float: left;
}
#mul3 {
height: 50px;
width: 300px;
}
#mul4 {
height: 50px;
width: 300px;
}
#mul5 {
height: 100px;
width: 300px;
}
#mul6 {
height: 50px;
width: 50px;
float: left;
}
#mul7 {
height: 50px;
width: 50px;
background-color: blue;
float: left;
border-radius: 10px;
}
#mul8 {
height: 50px;
width: 100px;
float: left;
}
#mul9 {
height: 50px;
width: 50px;
background-color: blue;
float: left;
border-radius: 10px;
}
#mul10 {
height: 50px;
width: 300px;
}
#mul11 {
height: 50px;
width: 50px;
float: left;
}
#mul12 {
height: 50px;
width: 50px;
background-color: blue;
float: left;
border-radius: 10px;
}
#mul13 {
height: 50px;
width: 100px;
float: left;
}
#mul14 {
height: 50px;
width: 50px;
background-color: blue;
float: left;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Task 15 - Ludo</h1>
<div id="outer">
<div id="papa">
<div id="child">
<div id="childa1">
<div id="childb1"></div>
<div id="childb2">
<div id="childba"></div>
<div id="childbb">
<div id="child1a"></div>
<div id="child1b">
<div id="child1c"></div>
<div id="child1d"></div>
<div id="child1e"></div>
<div id="child1f"></div>
<div id="child1g"></div>
<div id="child1h"></div>
<div id="child1i">
<div id="child1j"></div>
<div id="child1k"></div>
<div id="child1l"></div>
<div id="child1m"></div>
<div id="child1n"></div>
</div>
</div>
</div>
<div id="childbc">
</div>
</div>
<div id="childb3"></div>
</div>
</div>
<div id="child1">
<div id="box1">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3">
<div id="d3a"></div>
</div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
</div>
<div id="box2">
<div id="e1"></div>
<div id="e2"></div>
<div id="e3"></div>
<div id="e4"></div>
<div id="e5"></div>
<div id="e6"></div>
</div>
<div id="box3">
<div id="f1"></div>
<div id="f2">
<div id=f2a></div>
</div>
<div id="f3"></div>
<div id="f4"></div>
<div id="f5"></div>
<div id="f6"></div>
</div>
</div>
<div id="child2">
<div id="sum"></div>
<div id="sum1">
<div id="sum3"></div>
<div id="sum4">
<div id="sum5"></div>
<div id="sum6">
<div id="sum9"></div>
<div id="sum10"></div>
<div id="sum11"></div>
<div id="sum12"></div>
</div>
<div id="sum7"></div>
<div id="sum8">
<div id="sum13"></div>
<div id="sum14"></div>
<div id="sum15"></div>
<div id="sum16"></div>
</div>
</div>
</div>
<div id="sum2">
</div>
</div>
</div>
<div id="papa1">
<div id="child3">
<div id="box4">
<div id="a1"></div>
<div id="a2">
<div id="aa"></div>
</div>
<div id="a3"></div>
<div id="a4"></div>
<div id="a5"></div>
<div id="a6"></div>
</div>
<div id="box5">
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<div id="b5"></div>
<div id="b6"></div>
</div>
<div id="box6">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3">
<div id="ca"></div>
</div>
<div id="c4"></div>
<div id="c5"></div>
<div id="c6"></div>
</div>
</div>
<div id="child4"></div>
<div id="child5">
<div id="g1">
<div id="k1"></div>
<div id="k2"></div>
<div id="k3"></div>
<div id="k4">
<div id="i4c"></div>
</div>
<div id="k5"></div>
<div id="k6"></div>
</div>
<div id="g2">
<div id="l1"></div>
<div id="l2"></div>
<div id="l3"></div>
<div id="l4"></div>
<div id="l5"></div>
<div id="l6"></div>
</div>
<div id="g3">
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<div id="m4"></div>
<div id="m5">
<div id="i4d"></div>
</div>
<div id="m6"></div>
</div>
</div>
</div>
<div id="papa3">
<div id="child6">
<div id="sub"></div>
<div id="sub1"></div>
<div id="sub2">
<div id="sub3"></div>
<div id="sub4">
<div id="sub6"></div>
<div id="sub7"></div>
<div id="sub8"></div>
<div id="sub9"></div>
</div>
<div id="sub5"></div>
<div id="sub10">
<div id="sub11"></div>
<div id="sub12"></div>
<div id="sub13"></div>
<div id="sub14"></div>
</div>
</div>
</div>
<div id="child7">
<div id="z1">
<div id="h1"></div>
<div id="h2"></div>
<div id="h3"></div>
<div id="h4"></div>
<div id="h5">
<div id="i4a"></div>
</div>
<div id="h6"></div>
</div>
<div id="z2">
<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>
<div id="i4">
</div>
<div id="i5"></div>
<div id="i6"></div>
</div>
<div id="z3">
<div id="j1"></div>
<div id="j2"></div>
<div id="j3"></div>
<div id="j4">
<div id="i4b"></div>
</div>
<div id="j5"></div>
<div id="j6"></div>
</div>
</div>
<div id="child8">
<div id="mul"></div>
<div id="mul1"></div>
<div id="mul2">
<div id="mul3"></div>
<div id="mul4">
<div id="mul6"></div>
<div id="mul7"></div>
<div id="mul8"></div>
<div id="mul9"></div>
</div>
<div id="mul5"></div>
<div id="mul10">
<div id="mul11"></div>
<div id="mul12"></div>
<div id="mul13"></div>
<div id="mul14"></div>
</div>
</div>
</div>
</div>
</body>
</html>